jqgrid中当前页数据动态搜索，显示隐藏对应行

项目需要，动态搜索数据，因为数据可以一次性一页加载，同时不想增加服务器压力，动态搜索决定放到本地进行。

于是写了下面一段js代码

$(function() {
	$("#local-dynamic-select").bind('input propertychange', function() {
		// alert($(this).val())
		var searchStr = $(this).val();
		var tableid = $(this).data("tableid");
		var selectrow = $(this).data("selectrow");
		var obj = $("#" + tableid).jqGrid("getRowData");
		for (i = 0; i < obj.length; i++) {
			if (obj[i][selectrow].indexOf(searchStr) < 0) {
				hideRow(tableid, i + 1);//隐藏行的方法
			} else {
				showRow(tableid, i + 1);//显示行的方法
			}
		}
	});
});

只需要在表单前面加上对应的input就可以，里面自定义了两个属性，方便动态使用

<input type="text" id="local-dynamic-select" data-tableid="grid-table" data-selectrow="selectRow"/>

对应的隐藏显示行方法，去网上找到了

/**
 * 隐藏行
 */
function hideRow(tableId, rowId) {
	$("#" + tableId).setRowData(rowId, null, {
		display : 'none'
	});
}
/**
 * 显示行
 */
function showRow(tableId, rowId) {
	$("#" + tableId).setRowData(rowId, null, {
		display : 'block'
	});
}

setRowData方法是jqgrid中更新行的方法，对应三个参数rowid,data, cssprop。(介绍内容从jqgrid中文api中获取)
rowid：为行id
data：格式：{name1:value1,name2:value2…} name为colModel中名称；
cssprop：如果是string则会使用addClass方法将其加入到行的css中，如果是array或者对象 则会直接加到style属性中

如此，实现了本地的动态搜索显示数据，需要的是第一次加载所有的数据到页面上。

使用过程中出现了一个问题，问题出在显示行上面，显示的行不与表头宽度对应，通过检查代码，发现问题出现显示行时，display：block上面，block使得行的样式部分变化，于是做出了如下改动

/**
 * 显示行
 */
function showRow(tableId, rowId) {
	$("#" + tableId).setRowData(rowId, null, {
		display : ''
	});
}

问题解决